<template>
  <div style="width: 100%;height: 98%" v-loading="!isLogin"
       element-loading-text="未登陆无法使用"
       element-loading-spinner="iconfont icon-jujue">
    <!-- ──────────────────────────────────────────────── 照片 ──────────────────────────────────────────────── -->
    <div class="picture-root" id="picRoot">
      <div v-show="noneFileMsg" style="width: 100%;height:20px;font-size: 15px;color: #c6ccce;margin-bottom: 15px;">该文件夹下没有文件<br></div>
      <div
        class="pic-card"
        :style="pictureCardStyle"
        v-for="(item,index) in picture.data"
        :key="item.pictureId">
        <el-image
          class="image"
          fit="cover"
          :src="
          item.format !== 'jpg' && item.format !== 'jpeg' && item.format !== 'webp'&&
          item.format !== 'png' && item.format !== 'gif'  && item.format !== 'ico' ?
          'https://xiaozei-bucket.oss-cn-hangzhou.aliyuncs.com/bjsteam/bjstk-electron/otherfile.jpg' :
          item.url + picUrlSuffix + pictureThumbSize"
          :preview-src-list="getPreview(index)"
          @contextmenu.prevent="item.check = !item.check"
        >
        </el-image>
        <div class="card-info" :style="pictureCardSize === 0 ? {'height':'35px'} : {'height':'45px'}">
          <div :class="pictureCardSize === 0 ? 'card-operate-mini' : 'card-operate'">
            <i class="item el-icon-copy-document"  @click="copy(item.url)"></i>
            <i class="item el-icon-download"       @click="downLoad(item.url)"></i>
            <i class="item el-icon-edit"           @click="editVisible(item)"></i>
            <i class="item el-icon-close"          @click="del(item)"></i>
            <i class="item iconfont icon-dontlike" @click="favoriteHandler(item)" v-if="item.favorite === 0"      ></i>
            <i class="item iconfont icon-like"     @click="favoriteHandler(item)" v-else-if="item.favorite === 1" ></i>
          </div>
          <div :class="pictureCardSize === 0 ? 'card-info-msg-mini' : 'card-info-msg'" style="cursor: pointer;">
            <span class="msg-name" @click="favoriteHandler(item)">{{item.name}}</span>
            <span class="msg-size" @click="favoriteHandler(item)">{{pictureSize(item.size)}}</span>
            <el-checkbox class="checkbox msg-check" :class="pictureCardSize === 0 ? 'checkbox-mini':''" size="mini" v-model="item.check"></el-checkbox>
          </div>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;justify-content: center;margin-bottom: 10px;width: 100%;height: 40px;">
        <el-button class="bjs-button" @click="showMore" size="medium">查看更多</el-button>
        <el-upload
          drag
          multiple
          class="assign-folder-upload"
          :action="uploadAction"
          :on-success="success"
          :on-error="error"
          :headers="{'authorization':accessToken}"
          :data="{folderId:folder.currentId < 0 || folder.currentId == null ? -1 : folder.currentId,uploadPath:folder.currentUpPath}"
          :show-file-list="false">
          拖拽上传
        </el-upload>
      </div>
      <div class="current-folder">
        <span style="cursor: pointer;" @click="folder.toFolder.visible = true">当前 : {{folder.currentName}}</span>
      </div>
    </div>


    <!-- ──────────────────────────────────────────────── 浮动菜单 ──────────────────────────────────────────────── -->
    <div class="float-root" @contextmenu.prevent="refreshFiles">
      <!-- ────────────────────────────────────── 菜单1 ────────────────────────────────────── -->
      <el-dropdown :hide-on-click="false" placement="top-start" trigger="click" class="float-menu"
                   @visible-change="folderShow">
        <i class="el-icon-mouse float-menu-icon"></i>
        <el-dropdown-menu slot="dropdown" class="folder-dropdown">
          <!-- ─────────────────────── 头部统计 ─────────────────────── -->
          <el-dropdown-item class="item-top-statistics">
            <div class="all">
              <div class="column-one">
                <span class="total">Total</span>
                <span class="size">Size</span>
              </div>
              <div class="column-two">
                <span class="total">{{statistics.allCount}}</span>
                <span class="size">{{statistics.allSize}}</span>
              </div>
            </div>
          </el-dropdown-item>

          <!-- ─────────────────────── 文件夹列表 ─────────────────────── -->
          <el-dropdown-item class="item-center-folder">
            <div class="tree-title">
              <span>文件夹列表</span>
              <el-checkbox
                  class="favoriteCheck checkbox"
                  v-model="find.favorite"
                  :true-label="1"
                  :false-label="-1"
                  @change="refreshFiles"
              >
                喜欢
              </el-checkbox>
            </div>
            <div class="tree-body">
              <folder ref="refFolder" :fType="1" @getCurrentFolder="currentFolder" @getCurrentList="currentFolderList"></folder>
            </div>
          </el-dropdown-item>

          <!-- ─────────────────────── 底部统计 ─────────────────────── -->
          <el-dropdown-item class="item-bottom-statistics">
              <span class="msg">当前 : {{statistics.currentCount}}<strong> / </strong>{{statistics.currentSize}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- ────────────────────────────────────── 菜单2 ────────────────────────────────────── -->
      <div>
        <el-dropdown class="float-menu-right" :hide-on-click="false" placement="top-start" trigger="click" size="mini">
          <i class="el-icon-collection icon-to-folder" ></i>
          <el-dropdown-menu slot="dropdown" class="to-folder-dropdown">
            <el-dropdown-item @click.native="checkAll">全选</el-dropdown-item>
            <el-dropdown-item @click.native="unCheckAll">移除全选</el-dropdown-item>
            <el-dropdown-item @click.native="folder.toFolder.visible = true">移入文件夹</el-dropdown-item>
            <el-dropdown-item divided>
              卡片大小
              <el-slider
                  class="bjs-slider"
                  v-model="pictureCardSize"
                  :min=0
                  :max=100
                  :step=50
                  :show-stops="true"
                  @change="pictureCardSizeHandler($event)"></el-slider>
            </el-dropdown-item>
            <el-dropdown-item divided>
              缩略图大小 (H/px)
              <el-slider
                class="bjs-slider"
                v-model="pictureThumbSize"
                :min=100
                :max=500
                :step=100
                :show-stops="true"
                @change="pictureThumbSizeHandler($event)"></el-slider>
            </el-dropdown-item>
            <el-dropdown-item style="margin-top: 10px">
              <el-input class="bjs-input search-input" placeholder="搜索" v-model="find.name" :clearable="true" >
                <el-button slot="append" icon="el-icon-search" @click="refreshFiles"></el-button>
              </el-input>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- ─────────────────────── 修改名称 ─────────────────────── -->
    <el-dialog
        title="修改名称"
        class="bjs-dialog"
        style="margin-top: 50px;"
        width="30%"
        :visible.sync="updPictureName.visible">
      <el-form :model="updPictureName.form">
        <el-form-item>
          <el-input class="bjs-input" v-model="updPictureName.form.name"  placeholder="文件名" :clearable="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button size="mini" class="bjs-button" @click="edit">提交</el-button>
          <el-button size="mini" class="bjs-button" @click="updPictureName.visible=false">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>

    <!-- ─────────────────────── 转移文件夹 ─────────────────────── -->
    <el-dialog title="移到文件夹" :visible.sync="folder.toFolder.visible" width="30%" class="bjs-dialog" style="margin-top: 50px;">
      <el-form>
        <el-form-item>
          <treeSelect
              style="width: 100%"
              :clearable=true
              :value="folder.toFolder.folderId"
              :props="folder.treeSelectProps"
              :options="folder.list"
              @getValue="folder.toFolder.folderId = $event"
          >
          </treeSelect>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button size="mini" class="bjs-button" @click="toFolder">提交</el-button>
          <el-button size="mini" class="bjs-button" @click="folder.toFolder.visible=false">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { clipboard } from 'electron'
import treeSelect from '../../../components/treeSelect'
import folder     from '../folder/folder'
import { postFile, changeFolder, delFile, putFile, statistics } from '../../../api/picture'
import { convertFileSize } from '../../../assets/js/utils/util'
import { isNotNull, isNull } from '../../../assets/js/utils/validate'

export default {
  name: 'bjs-picture',
  data () {
    return {
      // ─────────────────────── 查询文件 ───────────────────────
      find : {
        start: 0,
        limit: 16,
        name: '',
        folderId: '',
        favorite: -1
      },
      // ─────────────────────── 文件列表 ───────────────────────
      picture : { data: [] },
      previewSrc: [],// 浏览大图
      // ─────────────────────── 文件统计 ───────────────────────
      statistics: {
        allSize: 0,
        allCount: 0,
        currentSize: 0,
        currentCount: 0
      },
      // ─────────────────────── 文件名修改 ───────────────────────
      updPictureName : {
        visible: false,
        item: {},
        form: {pictureId: -1, name : ''}
      },
      // ─────────────────────── 文件夹统计 ───────────────────────
      folder: {
        list: [],
        currentId: -1,
        currentUpPath:'',
        currentName: '',
        toFolder: {folderId: -1, visible: false},                             // 转移文件夹
        treeSelectProps:{value: 'folderId', label: 'name', children: 'child'} // 下拉列表配置
      },
      // ─────────────────────── 其他 ───────────────────────
      bigFileCard: -1,       // 是否大图
      pictureCardSize: 50,
      pictureCardStyle : {   // 图片尺寸
        'width': '200px',
        'height' : '230px',
        'border-radius': '10px'
      },
      pictureThumbSize: 200, // 预览滑块
      noneFileMsg: false     // 无图占位
    }
  },
  computed: {
    isLogin      () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    accessToken  () {return this.$GLOBAL.LOGIN.TOKEN_PREFIX + this.$store.state.config.login.accessToken},
    osType       () {return this.$store.state.config.os.type},
    uploadAction () {return this.$store.state.config.login.serverUrl + '/picture/upload'},
    picUrlSuffix () {
      if(this.$store.state.config.os.type === this.$GLOBAL.OS.TYPE.TENCENT_COS) {
        return this.$GLOBAL.OS.PIC_URL_SUFFIX.TENCENT
      }
      return this.$GLOBAL.OS.PIC_URL_SUFFIX.ALIBABA
    },
  },
  watch : {
    isLogin () { this.resetParam() } // 登陆重置参数
  },
  methods : {
    /** 查询文件列表 */
    findFiles () {
      let param = {
        folderId : this.folder.currentId,
        start    : this.find.start,
        limit    : this.find.limit,
        name     : this.find.name,
        favorite : this.find.favorite
      }
      postFile(param).then(resp => {
        if (isNotNull(resp.data) && resp.data.length > 0) {
          this.find.start = this.find.start + this.find.limit
          this.find.limit = 16
        }
        resp.data.forEach((item) => {
            this.picture.data.push(item)
            this.previewSrc.push(item.url)
        })
        this.noneFileMsg = this.picture.data.length === 0;
        this.$nextTick(() => {
          let root = document.getElementById('picRoot')
          root.scrollTop = root.scrollHeight
        })
      })
    },
    /** 重置参数,刷新页面 */
    refreshFiles () {
      this.resetParam()
      this.findFiles()
    },
    /** 查看更多 */
    showMore() { this.findFiles() },
    /** 重置查询参数 */
    resetParam () {
      this.find.start = 0
      this.find.limit = 16
      this.picture.data  = []
      this.previewSrc = []
    },
    getPreview (index) {
      return this.previewSrc.slice(index).concat(this.previewSrc.slice(0,index))
    },
    /*───────────────────────────────────────────────── 图片卡按钮 ─────────────────────────────────────────────────*/
    /** 1. 复制地址 */
    copy (url) { clipboard.writeText(url) },
    /** 2. 下载地址 */
    downLoad (url) {
      window.location.href = url
    },
    /** 3.1 修改文件名 - 页面显示 */
    editVisible (item) {
      this.updPictureName.item = item
      this.updPictureName.visible = true
      this.updPictureName.form.pictureId = item.pictureId
      this.updPictureName.form.name = item.name
    },
    /** 3.2 修改文件名 */
    edit () {
      putFile(this.updPictureName.form).then(() => {
        this.updPictureName.item.name = this.updPictureName.form.name
        this.updPictureName.item = {}
        this.updPictureName.visible = false
        this.updPictureName.form.name = ''
        this.updPictureName.form.pictureId = -1
      })
    },
    /** 4. 删除文件 */
    del (item) {
      this.$confirm('删掉可就找不回来了喔, 真的删掉吗 ◔ ‸◔?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {pictureId: item.pictureId, url: item.url}
        delFile(param).then(() => {
          let delIndex = this.binarySearchReverse(item.pictureId) // 查找文件位置,文件ID为倒序排列
          if (delIndex > -1) {
            this.picture.data.splice(delIndex, 1)
            if (this.find.start > 0) {
              this.find.start = this.find.start - 1
              this.find.limit = this.find.limit + 1
            }
          }
        })
      }).catch(()=>{})
    },
    /** 5. 标记喜欢 */
    favoriteHandler (item) {
      let favor
      if(item.favorite === 0) {
        favor = 1
      } else if (item.favorite === 1) {
        favor = 0
      }
      let obj = { pictureId: item.pictureId, favorite : favor}
      putFile(obj).then(() => {
        item.favorite = favor
        // 如果是只看喜欢,则将不喜欢的移出列表
        if (this.find.favorite === 1) {
          let delIndex = this.binarySearchReverse(item.pictureId)
          if (delIndex > -1) {
            this.picture.data.splice(delIndex,1)
          }
        }
      })
    },
    /*───────────────────────────────────────────────── 文件夹统计 ─────────────────────────────────────────────────*/
    statisticsAll () {
      statistics().then(resp => {
        this.statistics.allSize = convertFileSize(resp.data.pictureSize)
        this.statistics.allCount = resp.data.pictureCount
      })
    },
    statisticsCurrent () {
      if (isNull(this.folder.currentId)) return
      statistics({'folderId':this.folder.currentId}).then(resp => {
        this.statistics.currentSize = convertFileSize(resp.data.pictureSize)
        this.statistics.currentCount = resp.data.pictureCount
      })
    },
    /*───────────────────────────────────────────────── 文件夹 ─────────────────────────────────────────────────────*/
    currentFolder (row) {
      if (this.folder.currentId === row.folderId) return
      this.folder.currentId = row.folderId
      this.folder.currentUpPath = row.uploadPath
      this.folder.currentName = row.name
      this.refreshFiles()
      this.statisticsCurrent()
    },
    currentFolderList (list) {
      this.folder.list = list
    },
    /** 4. 移入文件夹*/
    toFolder () {
      let obj = { pictureIds : [], folderId : this.folder.toFolder.folderId }
      this.picture.data.forEach( (item) => {
        if(item.check === true)
          obj.pictureIds.push(item.pictureId)
      })
      if (obj.pictureIds.length === 0) {
        this.$bjsNotify.error('没选中照片喔')
        return
      }
      changeFolder(obj).then(() => {
        this.refreshFiles()
        this.folder.toFolder.folderId = null
        this.folder.toFolder.visible=false
      })
    },
    /** 文件全选/全不选 */
    checkAll   () {this.picture.data.forEach((item) => {item.check = true})},
    unCheckAll () {this.picture.data.forEach((item) => {item.check = false})},
    /** 菜单显示 */
    folderShow (show) {
      if (show) {
        this.statisticsAll()
        this.statisticsCurrent()
        this.$refs.refFolder.findFolderTree()
      }
    },
    /*───────────────────────────────────────────────── 上传 ─────────────────────────────────────────────────*/
    /** 上传成功回调 */
    success (resp, picture) {
      this.$store.commit('ADD',{
        name : picture.name,
        url : resp.data,
        result : resp.msg,
        time: new Date().toLocaleTimeString()
      })
    },
    /** 上传失败回调 */
    error (err, picture) {
      this.$store.commit('ADD',{
        name : picture.name,
        url : '错误',
        result : JSON.parse(err.message).msg, // err by new Error([message[, pictureName[, lineNumber]]]),
        time: new Date().toLocaleTimeString()
      })
    },
    /*───────────────────────────────────────────────── 其他 ─────────────────────────────────────────────────*/
    /** 转换文件大小单位 */
    pictureSize (pictureByte) {
      return convertFileSize(pictureByte)
    },
    pictureCardSizeHandler (value) {
      if (value === 0) {
        this.pictureCardStyle.width  = '100px'
        this.pictureCardStyle.height = '120px'
        this.pictureCardStyle["border-radius"] = '5px'
        this.pictureThumbSize = 100
      } else {
        if (value === 100) {
          this.pictureCardStyle.width  = '380px'
          this.pictureCardStyle.height = '435px'
          this.pictureThumbSize = 400
        } else if (value === 50) {
          this.pictureCardStyle.width  = '200px'
          this.pictureCardStyle.height = '230px'
          this.pictureThumbSize = 200
        }
        this.pictureCardStyle["border-radius"] = '10px'
      }
    },
    /** 设置缩略图大小 */
    pictureThumbSizeHandler (value) {
      this.pictureThumbSize = value
    },
    /**
     * 倒序数组二分查找
     * @param target 目标值
     * @returns {number} 数组下标
     */
    binarySearchReverse (target) {
      let left = 0
      let right = this.picture.data.length - 1
      while (left <= right) {
        let index = (left + right) >>> 1
        if (this.picture.data[index].pictureId > target) {
          left = index + 1
        } else if (this.picture.data[index].pictureId < target) {
          right = index - 1
        }else{
          return index
        }
      }
      return -1
    }
  },
  mounted: function () {
  },
  activated () {
  },
  components: {
    treeSelect,folder
  }
}
</script>

<style scoped lang="scss">
  @import url("https://fonts.googleapis.com/css?family=Lato:300,700,800");

  /*────────────────────────────────────────────── 图片 ────────────────────────────────────────────────────────*/
  .picture-root {
    @include boxBase(100%,100%);
    @include flex(row,flex-start);
    overflow: auto;
    padding-top: 10px;
    align-content: flex-start;
    flex-wrap:wrap;

    .pic-card {
      @include themeBgColor($theme-bg-color-light,$theme-bg-color-night);
      @include themeBorder(1px,$theme-bg-color-light,$theme-bg-color-night);
      position: relative;
      margin-left: 20px;
      margin-bottom: 20px;
      overflow: hidden;
      &:hover {
        .card-operate,.card-operate-mini {
          visibility: visible !important;
          opacity: 1 !important;
        }
        .card-info {
          .card-info-msg,.card-info-msg-mini {
            @include themeColor($theme-color-light-7,$theme-color-night-dark-7);
            background-color: rgba(0, 0, 0, 0.7) !important;
          }
        }
      }

      /*─────────────────────── 图片 ───────────────────────*/
      .image {
        @include boxBase(100%,100%);
        /deep/ .el-image-viewer__mask {
          opacity: .8;
        }
      }

      /*─────────────────────── 图片信息 ───────────────────*/
      .card-info {
        @include flex(column,space-between);
        position: absolute;
        width: 100%;
        bottom: 0;
        /* 图片操作 */
        .card-operate {
          @include themeColor( $theme-color-light-7,$theme-color-night-dark-7);
          @include flex(row,space-between,center);
          height: 50%;
          visibility: hidden;
          opacity:0;
          background-color: rgba(0, 0, 0, 0.7);
          transition: visibility 0.5s, opacity 0.5s;
          .item {
            width: 20%;
            font-size: 16px;
            cursor: pointer;
            transition: color 0.4s;
            &:hover {
              @include themeColor($theme-color-light,$theme-color-night);
            }
          }
        }
        .card-operate-mini {
          @extend .card-operate;
          .item {
            @extend .item;
            padding: 3px 0 3px 0 ;
            font-size: 13px;
          }
          .icon-like,.icon-dontlike {
            &:before {
              font-size: 13px !important;
            }
          }
        }

        /* 图片信息 */
        .card-info-msg {
          @include themeColor( $theme-color-light-7,$theme-color-night-dark-7);
          @include flex(row,space-between,center);
          height: 50%;
          padding: 3px 5px 3px 10px;
          font-size: 11px;
          background-color: rgba(0, 0, 0, 0.5);
          transition: background-color 0.4s,color 0.4s;
          .msg-name {
            width: 65%;
            overflow:hidden;
            white-space:nowrap;
            text-align: left;
          }
          .msg-size {
            width: 20%;
          }
          .msg-check {
            width: 10%;
          }
        }
        .card-info-msg-mini {
          @include themeColor($theme-color-light-1,rgba(0, 0, 0, 0));
          @include flex(row,space-between,center);
          height: 50%;
          padding: 0 5px 6px 10px;
          font-size: 8px;
          background-color: rgba(0, 0, 0, 0);
          transition: background-color 0.4s,color 0.4s;
          .msg-name {
            width: 80%;
            overflow:hidden;
            white-space:nowrap;
            text-align: left;
          }
          .msg-size {
            visibility: hidden;
          }
          .msg-check {
            width: 20%;
          }
        }
      }
    }
  }

  /*────────────────────────────────────────────── 当前文件夹统计 ───────────────────────────────────────────────*/
  .current-folder {
    @include flex(column,center,center);
    @include themeColor($theme-color-light-7,$theme-color-night-dark-3);
    @include boxBase(100%,20px);
    font-size: 12px;
    margin-bottom: 10px;
    span {
      @include themeBorder(1px,$theme-color-light-1,$theme-color-night-dark-1);
      padding: 3px 10px;
    }
  }

  /*────────────────────────────────────────────── 浮动按钮 ────────────────────────────────────────────────────*/
  .float-root {
    @include themeBgColor($theme-color-light-1,$theme-color-night-dark-1);
    @include flex(row);
    position: absolute;
    width: 80px;
    left: 200px;
    bottom: 70px;
    text-align: left;
    border-radius: 40px;
    transition: background-color 0.5s,color 0.5s;
    color: rgba(255, 255, 255, 0.75);

    &:hover {
      @include themeBgColor($theme-color-light-7,$theme-color-night-dark-7);
      .float-menu .float-menu-icon {
        color: white;
        @include themeBgColor($theme-color-light-7,$theme-color-night-dark-7);
      }
      .icon-to-folder {
        color: white;
      }
    }

    .float-menu {
      .float-menu-icon {
        @include themeBgColor($theme-color-light-3,$theme-color-night-dark-3);
        font-size: 30px;
        padding: 5px;
        color: rgba(255, 255, 255, 0.75);
        border-radius: 40px;
        cursor: pointer;
        transition: background-color 0.5s,color 0.5s;
      }
    }

    .float-menu-right {
    }

    .icon-to-folder {
      font-size: 27px;
      padding-top: 8px;
      padding-left: 3px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.75);
    }
  }

  /*────────────────────────────────────────────── 文件夹菜单 ──────────────────────────────────────────────────*/
  .folder-dropdown {
    max-width: 270px;
    min-width: 270px;
    min-height: 500px;
    max-height: 500px;
    left: 190px !important;
    padding: 0 0 0 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.39);
    border: 0 ;
    border-radius: 15px;
    /deep/ .el-dropdown-menu__item {
      padding: 0;
      color: $theme-color-light;
      [data-theme="night"] & {
        background-color: #2D2B30;
      }
    }
    /deep/ .el-dropdown-menu__item:hover {
      @include themeColor($theme-color-light,$theme-color-night-dark);
      background-color: #ffffff;
    }
    /deep/ .el-dropdown-menu__item:focus {
    }
    /deep/ .popper__arrow {
      margin-left: 0;
      left: 25px !important;
      color: $theme-color-light !important;
      border-top-color: $theme-color-light !important;
      &::after {border-top-color: $theme-color-light !important;}
      [data-theme="night"] & {
        color: #2D2B30 !important;
        border-top-color: #2D2B30 !important;
        &::after {border-top-color: #2D2B30 !important;}
      }
    }

    .item-top-statistics {
      font-family: Lato;
      border: 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: $theme-color-light;
      &:hover {
        @include themeBgColor($theme-color-light,#2D2B30);
      }
      .all {
        @include fontBase(15px,700,Lato);
        color: white;
        padding-bottom: 10px;
        .column-one {
          @include flex(row,flex-start);
          height: 30px;
          .total {
            width: 40%;
            margin-left: 20px
          }
          .size {
            width: 40%
          }
        }
        .column-two {
          @include flex(row,flex-end);
          height: 30px;
          text-align: right;
          font-size: 25px;
          .total {
            width: 45%;
            color: #b0cb5e;
            margin-right: 20px;
          }
          .size {
            width: 45%;
            color: #ffd700;
            margin-right: 10px;
          }
        }
      }
    }
    .item-center-folder {
      @include flex(column,flex-start);
      @include themeColor($theme-color-light,$theme-color-night-dark);
      height: 405px;
      cursor: auto;
      &:hover {
        [data-theme="night"] & {
          background-color: #2D2B30;
        }
      }
      &:focus {
        @include themeBgColor(#ffffff,#2D2B30);
      }

      .tree-title {
        @include themeBgColor($theme-color-light-5,#2D2B30);
        @include flex(row,space-between);
        height: 9%;
        padding-left: 10px;
        font-weight: bold;
        .favoriteCheck {
          margin-right: 10px;
        }
      }
      .tree-body {
        height: 91%;
      }
    }
    .item-bottom-statistics {
      @include flex(row,flex-start,center);
      @include fontBase(12px,500,Lato);
      @include themeColor(#ffffff,$theme-color-night-dark);
      @include themeBgColor($theme-color-light,#2D2B30);
      height: 25px;
      border: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      &:hover {
        @include themeColor(#ffffff,$theme-color-night-dark);
        @include themeBgColor($theme-color-light,#2D2B30);
      }
      .msg {
        margin-left: 10px;
      }
    }
  }

  .el-tooltip__popper.is-light {
    border: 0 !important;
  }

  /*────────────────────────────────────────────── 移入文件夹菜单 ──────────────────────────────────────────────*/
  .to-folder-dropdown {
    padding: 5px 10px;
    border: 0 ;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.39);
    [data-theme="night"] & {
      background-color: $theme-bg-color-night;
    }

    /deep/ .popper__arrow {
      [data-theme="night"] & {
        color: #2D2B30 !important;
        border-top-color: #2D2B30 !important;
        &::after {
          border-top-color: #2D2B30 !important;
        }
      }
    }

    .search-input {
      @include boxBase(170px,25px);
      margin-bottom: 10px;
      /deep/ .el-input__inner {
      }
      /deep/ .el-input-group__append {
        padding: 0 11px;
        border-radius: 0;
        [data-theme="night"] & {
          border-color: #5a5a5a;
          background-color: $theme-bg-color-night;
        }
      }

      /deep/ .el-input__suffix {
        visibility: visible !important;
        opacity: 1 !important;
      }

      /deep/ .el-icon-search {
        margin: 0;
      }
    }

    /deep/ .el-dropdown-menu__item {
      padding: 0;
      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
      }
    }

    /deep/ .el-dropdown-menu__item--divided {
      [data-theme="night"] & {
        border-top : 1px solid #595959;
      }
    }

    /deep/ .el-dropdown-menu__item--divided:before {
      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
      }
    }

    /deep/ .el-dropdown-menu__item:hover {
      @include themeColor($theme-color-light,$theme-color-night-dark);
      @include themeBgColor(#ffffff, $theme-bg-color-night);
    }

    /deep/ .el-dropdown-menu__item:focus {
      @include themeColor($theme-color-light,$theme-color-night-dark);
    }
  }

  /deep/ .el-image-viewer__close,.el-image-viewer__actions {
    @include themeColor($theme-color-light,$theme-color-night-dark);
  }

  .checkbox {
    /deep/ .el-checkbox__label {
      font-size: 12px;
    }

    /deep/ .el-checkbox__inner {
      border-color: rgba(191, 191, 191, 0.1);
      background-color: rgba(158, 158, 158, 0.3);
    }
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      @include themeBgColor($theme-color-light,$theme-color-night-dark);
      @include themeBorder(1px,$theme-color-light,$theme-color-night-dark);
    }
    /deep/ .el-checkbox__inner:hover {
      @include themeBorder(1px,$theme-color-light-7,$theme-color-night-dark);
    }
    /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
      @include themeColor($theme-color-light,$theme-color-night-dark);
    }
    /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
      @include themeBorder(1px,$theme-color-light,$theme-color-night-dark);
    }
  }
  .checkbox-mini {
    /deep/ .el-checkbox__inner {
      border-color: rgba(0,0,0,0) !important;
      background-color: rgba(39, 39, 39, 0.05) !important;
    }
  }

  .el-table td {
    padding: 0 !important;
  }

  .assign-folder-upload {
    /deep/ .el-upload {
      height: 100%;
      /deep/ .el-upload-dragger {
        @include boxBase(98px,100%);
        @include flex(column,center,center);
        @include themeColor($theme-color-light,$theme-color-night-dark);
        @include themeBorder(1px,$theme-color-light,$theme-color-night-dark);
        @include themeBgColor(#ffffff,$theme-bg-color-night);
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 0;
        border-left: 0;
        &:hover {
          @include themeBgColor($theme-color-light-3,$theme-color-night-dark-1);
          transition: background-color 0.3s;
        }
      }

    }
  }

</style>
